<template>
  <div v-if="contactState.length" class="basic-contact-float">
    <div
      v-for="{ item, key } in contactState"
      :key="key"
      class="basic-contact-float__container"
    >
      <el-tooltip
        placement="left"
        effect="light"
        :offset="25"
        :enterable="true"
        popper-class="contact-popper"
        @mouseenter="handleMouse(true, key)"
        @mouseleave="handleMouse(false, '')"
      >
        <div
          v-if="item.length > 0"
          class="img-container"
          @mouseenter="handleMouse(true, key)"
          @mouseleave="handleMouse(false, '')"
        >
          <div class="img-container__tangle"></div>
          <app-icon
            :key="key"
            :name="floatIcon(key)"
            class="basic-contact-float__icon"
          ></app-icon>
        </div>
        <template #content>
          <div
            v-if="item.length > 0"
            class="custom-tooltip"
            @mouseenter="handleMouse(true, key)"
            @mouseleave="handleMouse(false, '')"
          >
            <div class="contact-container" :class="`${key}-container`">
              <div class="contact-container__name">{{ dealName(key) }}</div>
              <div
                v-for="(ele, index) in item"
                :key="`item__${index}`"
                class="contact-list"
              >
                <div
                  v-if="['email', 'qq', 'phone'].includes(key)"
                  class="contact-list__item"
                >
                  <!-- <TextEll
                    ref="textEllRef"
                    :content="ele"
                    class="contact-container__content"
                  ></TextEll> -->
                  <div class="truncate contact-container__content">
                    {{ ele }}
                  </div>
                  <span v-copy:both="ele" class="copy-icon"></span>
                </div>
                <div v-else class="contact-list__item">
                  <img
                    src="@/assets/modules/icons/ico_tg.svg"
                    alt=""
                    class="w-4 h-4"
                  />
                  <a
                    href="#"
                    class="text-sm text-[#454954] hover:cursor-pointer hover:text-primary no-underline"
                    @click="handleOpen(ele)"
                    >客服{{ index + 1 }}</a
                  >
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface IProps {
  contact: Record<string, string[]>
  hasPrefix?: boolean
  hasSuffix?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  hasPrefix: false,
  hasSuffix: false
})

const selectType = ref<string>('')
const dealName = computed(() => (name: string) => {
  const map = {
    email: '电子邮箱',
    phone: '联系电话',
    qq: 'QQ',
    telegram: 'Telegram',
    skype: 'Skype'
  }
  return map[name]
})

const handleOpen = (url: string) => {
  window.open(url, '_blank')
}

const handleMouse = (hover: boolean, type: string = '') => {
  selectType.value = hover ? type : ''
}
const floatIcon = computed(() => (type: string) => {
  return selectType.value === type ? `ico_${type}` : `ico_${type}_default`
})

const contactState = computed(() => {
  const sort = ['phone', 'email', 'qq', 'telegram', 'skype']
  return sort
    .map(key => {
      const item = props.contact[key]
      if (item && item.length > 0) {
        return { key, item }
      }
      return { key: '', item: [] }
    })
    .filter(v => v.item.length)
})
</script>
<style lang="scss" scoped>
.basic-contact-float {
  width: 48px;
  border-radius: 24px;
  background-color: white;
  display: flex;
  flex-direction: column;
  row-gap: 18px;
  justify-content: space-between;
  padding: 20px 0;
  position: fixed;
  bottom: 30%;
  right: 40px;
  z-index: 10;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.1);
  &__icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .img-container {
    width: 24px;
    height: 24px;
    position: relative;
  }
  &__container {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
.custom-tooltip {
  .contact-container {
    background-color: white;
    width: 237px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    overflow: hidden;
    z-index: 2;

    .contact-list {
      display: flex;
      flex-direction: row;
      column-gap: 16px;
      row-gap: 8px;
      &__item {
        @apply flex flex-row gap-x-2 items-center;
      }
      .copy-icon {
        color: #d0d9e6 !important;
        transition: all 0.3s;
        flex-shrink: 0;
        &:hover {
          color: var(--el-color-primary) !important;
        }
      }
    }

    &__name {
      font-size: 12px;
      color: #454954;
      font-weight: 500;
    }
    &__content {
      max-width: 186px;
      font-size: 12px;
      color: #454954;
      font-weight: 400;
    }
  }
  .telegram-container,
  .skype-container {
    width: 149px;
  }
}
</style>
<style>
.contact-popper {
  padding: 20px !important;
}
</style>
